<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->

        <tree-tools :node-data="titleData" @taggle-box="taggleBox" />
        <!-- 树形结构 -->
        <el-tree :data="departs" :props="defaultProps">
          <!-- :data="departs" elm插件后台slot占位绑定的数据 -->
          <template v-slot="scope">
            <tree-tools :node-data="scope.data" @on-success="onSuccess" @taggle-box="taggleBox" />
          </template>
        </el-tree>
      </el-card>
    </div>

    <!-- 添加部门 弹窗子组件 -->
    <!-- <add-dept :is-show-dept="isShowDept" @taggle-box="taggleBox" /> -->

    <!-- 属性绑定sync修饰符的作用，实现父子传值的双向绑定 -->
    <!-- 在子组件上传递属性时候绑定 update -->
    <!-- 可以把事件去掉，只需要绑定属性名 -->
    <add-dept :operate-type="operateType" :is-show-dept.sync="isShowDept" :dlist="dlist" :current-pid="currentPid" @on-success="onSuccess" />
  </div>
</template>

<script>
import { reqGetDepartments } from '@/api/departments.js'
import TreeTools from './components/TreeTools.vue'
import AddDept from './components/AddDept.vue'
export default {
  name: 'Departments',
  components: { TreeTools, AddDept },
  data () {
    return {
      operateType: 'add',
      // 原始部门数据
      dlist: [],
      // 记录在哪个节点下添加子部门
      currentPid: '',
      // 显示添加弹窗
      isShowDept: false,
      // 标题的数据
      titleData: {
        id: '',
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        root: true
      },
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  created () {
    // 调用获取列表函数
    this.loadDepartList()
  },
  methods: {
    // 控制添加弹窗的显示隐藏
    taggleBox (info) {
      this.isShowDept = info.isShow
      this.currentPid = info.pid
      this.operateType = info.operateType
    },

    // 获取列表原始数据
    async loadDepartList () {
      const ret = await reqGetDepartments()
      // console.log(ret)
      try {
        if (ret.code === 10000) {
          // 获取成功
          // 原始部门数据
          this.dlist = ret.data.depts
          // 树形结构数据列表
          this.departs = this.tranlateListToTree(ret.data.depts, '')
          console.log(this.departs)
          this.titleData.name = ret.data.companyName
          // 获取泪飙成功的时候，调用函数，给判断一二级路由的函数传入参数
        }
      } catch (err) {
        // 获取失败
        this.$message.error('获取部门列表失败')
      }
    },
    // 把列表数据结构转换为树形数据结构
    tranlateListToTree (list, pid) {
      // this.tranlateListToTree(ret.data.depts, '')
      const arr = []
      list.forEach(item => {
        // 遍历每一个元素，并且判断每一项pid是否可以参数的pid一致，这样可以找到参数pid所属的下属部门
        if (item.pid === pid) {
          // pid 为空，说明是一级路由
          const children = this.tranlateListToTree(list, item.id)
          // children就是item的下级所有部门
          if (children && children.length > 0) {
            // children 不为空，且长度大于0
            // 证明找到了当前部门的子部门
            item.children = children
            // 证明当前节点包含子节点,给当前节点添加一个子属性
          }
          arr.push(item)
        }
      })
      return arr
    },
    onSuccess () {
      this.loadDepartList()
      // 子传父监,删除成功刷新列表
    }
  }

}
</script>

<style scoped>
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}
</style>
